<template>
  <view class="userInfo">
    <view class="userInfo-item">
      <view class="label">头像</view>
      <view class="userInfo-item-fr">
        <!--        <UploadImg :width="80" :height="80" keyName="avatar" @getUrl="getUrl"
          :uploadImg="params.avatar?params.avatar:'../../static/images/moren.png'" /> -->
        <image style="width: 80rpx;height: 80rpx;" :src="params.avatar?params.avatar:'../../static/images/logo.jpg'"
          mode=""></image>
      </view>
    </view>
    <view class="userInfo-item">
      <view class="label">姓名</view>
      <view class="userInfo-item-fr">
        <text class="styles">{{params.name}}</text>
      </view>
    </view>
    <view class="userInfo-item">
      <view class="label">手机号</view>
      <view class="userInfo-item-fr">
        <input type="text" maxlength="11" style="color: #222;" v-model="params.phone" class="userInfo-item-fr-ipt"
          placeholder="请输入" placeholder-class="styles" />
        <image class="toRight" src="../../static/images/arrow.png" mode=""></image>
      </view>
    </view>
    <view class="footer">
      <view class="btn" @click="onSave">保存</view>
    </view>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  import tools from "../../utils/index.js"
  export default {
    data() {
      return {
        params: {
          avatar: "",
          name: "",
          phone: ""
        },
        prevpage: ""
      }
    },
    onLoad(option) {
      console.log("上一个页面是哪里", option.prevpage);
      this.prevpage = option.prevpage;
    },
    onShow() {
      this.getUserInfo();
    },
    methods: {
      onSave() {
        if (!this.params.phone) {
          uni.showToast({
            title: "手机号不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!tools.checkPhone(this.params.phone)) {
          uni.showToast({
            title: "手机号格式错误",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        reqApi.editPhone({
          phone: this.params.phone
        }).then(res => {
          uni.showToast({
            title: "保存成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(() => {
            if (this.prevpage == 'home') {
              let userInfo = uni.getStorageSync("userInfo");
              if(userInfo.is_operation == 1){
                uni.reLaunch({
                  url: "/pages/order/orderList"
                })
              }
              if(userInfo.is_seller == 1){
                uni.reLaunch({
                  url: "/pages/order/takeOrderList"
                })
              }
            } else {
              uni.reLaunch({
                url: "/pages/mine/index"
              })
            }

          }, 1500)
        })
      },
      getUrl(e) {
        console.log("子组件传过来的", e);
        const {
          keyName,
          value
        } = e;
        this.params[keyName] = value;
      },
      getUserInfo() {
        reqApi.getUserInfo({}).then(res => {
          console.log("获取用户信息", res);
          uni.setStorageSync("userInfo", res.data);
          this.params = res.data;
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer {
    padding: 30rpx 70rpx;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    background: #fff;

    .btn {
      width: 100%;
      height: 88rpx;
      background: #0078D3;
      border-radius: 88rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }
  }

  .userInfo {
    .userInfo-item {
      display: flex;
      justify-content: space-between;
      height: 104rpx;
      align-items: center;
      border-bottom: 2rpx solid #eee;
      background: #fff;
      padding: 0 30rpx;
      box-sizing: border-box;

      .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
      }

      .userInfo-item-fr {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .userInfo-item-fr-ipt {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #999;
          flex: 1;
          text-align: right;
        }

        .styles {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #666;
        }

        .toRight {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
</style>